
<template>
<div style="width:100%">
  <div :id="id" :style="{height:'200px',width:'244px'}" class="echarts_box"/>
  <div class="echarts_name"> {{name}}</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: ["id","name","info"],
  data() {
    return {
      chart: null,
      num:0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById(this.id);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
              trigger: 'item'
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '40%'],
                center: ['50%', '50%'],
                data: this.info.info,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                label:{
                  normal:{
                    show: true, // 图表外的折线是否显示
                    // position: 'center',
                    // padding: [0, 0, 20, 0],  //设置字angular的边距
                    // fontSize: 16,
                  },
                },
                labelLine:{
                  normal:{
                    show:true,
                    length: 5, 
                  }
                },
                itemStyle: {
                  borderRadius: 2, //圆角角度
                }         
              }
            ],
      };

      option && myChart.setOption(option);
    }
  }
}
</script>
<style scoped lang="scss">
    .echarts_name{
        width: 100%;
        text-align: center;
    }
    .echarts_box{
      min-width:244px !important;
    }
</style>